<template>
	<Header :title="t('statistics.title')" />
	<view class="content">
		<view class="content-span">
			<up-text
				:text="t('statistics.cleanTitle')"
				bold
				color="#222"
				size="14"></up-text>
			<view class="content-pic">
				<view
					class="span"
					v-for="(item, index) in picList"
					:key="index">
					<up-avatar
						shape="square"
						size="45"
						:src="item.pic"
						customStyle="margin-bottom:10rpx"></up-avatar>
					<up-text
						:text="item.title"
						bold
						color="#222"
						size="12"
						align="center"></up-text>
				</view>
			</view>
		</view>
		<view class="content-span">
			<up-text
				:text="t('statistics.areaTitle')"
				bold
				color="#222"
				size="14"></up-text>
			<view class="echarts" v-show="!isLoading">
				<EChartsComponent :options="chartOptions" />
			</view>
			<view class="loading" v-show="isLoading">
				<LoadingDots />
			</view>
		</view>
		<view class="content-span">
			<up-text
				:text="t('statistics.trendTitle')"
				bold
				color="#222"
				size="14"></up-text>
			<view class="echarts" v-show="!isLoading">
				<EChartsComponent :options="barOption" />
			</view>
			<view class="loading" v-show="isLoading">
				<LoadingDots />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import Header from "@/components/header/index.vue";
import EChartsComponent from "@/components/echart/index.vue";
import { useTimeGenerator, useTimeFormatter } from "@/utils/getNowDays";
import LoadingDots from "@/components/LoadingDots/index.vue";
import { getPeriodPlans } from "@/service/index";
import type { EChartsOption } from "echarts";
import { onLoad } from "@dcloudio/uni-app";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const { getTime } = useTimeGenerator();
const { getSecond } = useTimeFormatter();
const last7Days = ref<string[]>(getTime());
const isLoading = ref(false);
const picList = reactive([
	{
		title: "",
		pic: "/static/image/info/s1.png",
	},
	{
		title: "",
		pic: "/static/image/info/s2.png",
	},
	{
		title: "",
		pic: "/static/image/info/s3.png",
	},
]);

const chartOptions = ref<EChartsOption>({
	grid: {
		left: 50,
		right: 35,
		top: 20,
		bottom: 20,
	},
	xAxis: {
		type: "category",
		boundaryGap: false,
		data: last7Days.value,
		axisLabel: {
			show: true,
			color: "#999999",
			fontSize: 12,
			lineStyle: {
				color: "#999",
			},
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			show: false,
		},
	},
	yAxis: {
		type: "value",
		axisLabel: {
			show: true,
			color: "#999999",
			fontSize: 12,
			lineStyle: {
				color: "#999",
			},
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: "#E5E5E5",
				type: "dashed",
			},
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			show: false,
		},
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "cross",
			label: {
				backgroundColor: "#999999",
			},
		},
		formatter:
			t("statistics.date") +
			"：{b0}<br>" +
			t("statistics.area") +
			": {c0} m²",
		padding: 10,
		enterable: true,
	},
	series: [
		{
			data: [0, 0, 0, 0, 0, 0, 0],
			type: "line",
			areaStyle: {
				color: "#E8EFFD", // 直接设置颜色
			},
			lineStyle: {
				color: "#025DF4", // 直接设置线条颜色
				width: 2,
			},
			itemStyle: {
				color: "#025DF4", // 直接设置颜色
			},
			emphasis: {
				// 高亮状态
				lineStyle: {
					width: 3,
				},
				itemStyle: {
					color: "#025DF4",
				},
			},
			symbolSize: 0,
		},
	],
});
const barOption = ref({
	grid: {
		x: 50,
		x2: 20,
		y: 20,
		y2: 20,
	},
	xAxis: {
		type: "category",
		data: last7Days.value,
		axisLabel: {
			show: true,
			lineStyle: {
				color: "#999", //更改坐标轴颜色
			},
			textStyle: {
				color: "#999999",
				fontSize: 12,
			},
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			show: false,
		},
	},
	yAxis: {
		type: "value",
		axisLabel: {
			show: true,
			lineStyle: {
				color: "#999",
			},
			textStyle: {
				color: "#999999",
				fontSize: 12,
			},
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: "#E5E5E5",
				type: "solid",
			},
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			show: false,
		},
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow",
			label: {
				backgroundColor: "#999999",
			},
			shadowStyle: {
				color: "rgba(0, 0, 0, 0.1)",
				width: "1",
			},
		},
		formatter:
			t("statistics.date") +
			"：{b0}<br>" +
			t("recordDetails.time") +
			": {c0}" +
			t("statistics.hours"),
		show: true,
		enterable: true, // 鼠标可以进入提示框
	},

	series: [
		{
			data: [0, 0, 0, 0, 0, 0, 0],
			type: "bar",
			itemStyle: {
				normal: {
					color: "#2F52DF",
					lineStyle: {
						color: "#2F52DF",
					},
				},
			},
			emphasis: {
				itemStyle: {
					color: "#007DFF",
				},
			},
			barWidth: "50%",
			symbol: "none",
		},
	],
});
interface PeriodPlan {
	date: string;
	times: number;
	duration: number;
	area: number;
}

const deviceSn = ref("");

const getStatisticsInfos = async () => {
	try {
		uni.showLoading({ title: "加载中" });
		isLoading.value = true;
		const dates = last7Days.value;
		const params = {
			device_sns: deviceSn.value,
			start_date: dates[0],
			end_date: dates[dates.length - 1],
		};

		const { data } = await getPeriodPlans(params);

		if (data.code === 0) {
			processStatisticsData(data.data.periods, dates);
		}
	} catch (error) {
		console.error("获取统计信息失败:", error);
	} finally {
		uni.hideLoading();
		isLoading.value = false;
	}
};

const processStatisticsData = (periods: PeriodPlan[], dates: string[]) => {
	const areaData: number[] = [];
	const durationData: number[] = [];
	const today = dates[dates.length - 1];
	const todayPlan = ref<PeriodPlan>();
	if (periods?.length > 0) {
		dates.forEach((date) => {
			const plan = periods.find((p) => p.date === date);
			if (plan) {
				if (plan.date === today) {
					todayPlan.value = plan;
				}
				areaData.push(plan.area);
				durationData.push(+(plan.duration / 3600).toFixed(2)); // 秒转小时
			} else {
				areaData.push(0);
				durationData.push(0);
			}
		});
	} else {
		// 默认填充0值
		dates.forEach(() => {
			areaData.push(0);
			durationData.push(0);
		});
	}
	picList[0].title = String(todayPlan.value?.times || 0) + t("statistics.rm");
	picList[1].title = String(todayPlan.value?.area.toFixed(2) || 0) + " 𝑚²";
	picList[2].title = getSecond(todayPlan.value?.duration || 0);
	chartOptions.value.series[0].data = areaData;
	barOption.value.series[0].data = durationData;
};
onLoad((options) => {
	if (options?.device_sn) {
		deviceSn.value = options.device_sn;
	}
});
onMounted(() => {
	getStatisticsInfos();
});
</script>

<style lang="scss" scoped>
.content {
	padding: 20rpx 30rpx;
	.content-span {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 16rpx 30rpx;
		border-radius: 10rpx;
	}
	.content-pic {
		display: flex;
		.span {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 20rpx;
		}
	}
	.echarts {
		min-height: 30vh;
	}
}
.loading {
	height: 30vh;
	background-color: #d8d8d8;
}
</style>
